<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>（XJLDTC）家庭云服务</title>
  <!-- Tell the browser to be responsive to screen width -->
  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
  <!-- Ionicons -->
  <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
  <!-- Theme style -->
  <link rel="stylesheet" href="../../dist/css/adminlte.min.css">
  <!-- iCheck -->
  <link rel="stylesheet" href="../../plugins/iCheck/square/blue.css">
  <link rel="shortcut icon" href="/common/img/favicon.ico">
  <!-- Google Font: Source Sans Pro -->
  <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
</head>
<body class="hold-transition login-page" style="background-image: url(/common/img/login-bg.jpg);background-size: 100% 100%;">
<div class="login-box">
  <div class="login-logo">
    <b style="color: white;filter:alpha(Opacity=80);-moz-opacity:0.8;opacity: 0.8;">开始你的旅程</b>
  </div>
  <!-- /.login-logo -->
  <div class="card" style="background-color: black; filter:alpha(Opacity=70);-moz-opacity:0.7;opacity: 0.7; box-shadow:0 0 25px #FFF;">
    <div class="card-body login-card-body" >
      <p class="login-box-msg" style="color: white;">我是图标</p>

      <form id="login" action="" method="post">
        <div class="form-group has-feedback" style="padding-top: 20px;">
          <input type="text" id="loginName" class="form-control" name="loginName" placeholder="姓名">
        </div>
        <div class="form-group has-feedback" style="padding-top: 30px;">
          <input type="passWord" id="passWord" class="form-control" name="passWord" placeholder="口令">
        </div>
        <div class="row" style="padding-top: 30px;">
          <div class="col-8">
            <div class="checkbox icheck">
              <label style="font-size: 3;color: white;">
                <input type="checkbox" />&nbsp;&nbsp;请记住我 
              </label>
            </div>
          </div>
          <!-- /.col -->
          <p id="createResult"></p>
          <div style="padding-left: 50%;padding-top: 20px;width: 100%;">
            <button type="button" class="btn btn-primary" onclick="login()" >开始旅程</button>
            <button type="button" onclick="window.location.href='/index.html'" class="btn btn-default float-right" style="margin-left: 8%;">返回</button>
          </div>
          <!-- /.col -->
        </div>
      </form>
    </div>
    <div style="font-size: 5px;color: white;padding-top: 20px;padding-left: 62%;">
    	<b>声明：</b>目前为开放注册功<br>能，忘记密码也没办法。
    </div>
    <div style="padding-top: 10px;"></div>
  </div>
</div>
<!-- /.login-box -->

<!-- jQuery -->
<script src="/plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap 4 -->
<script src="/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- iCheck -->
<script src="/plugins/iCheck/icheck.min.js"></script>
<!-- jQuery json -->
<script src="/plugins/jQuery-serialize-object/jquery.serialize-object.min.js"></script>
<script>
  $(function () {
    $('input').iCheck({
      checkboxClass: 'icheckbox_square-blue',
      radioClass   : 'iradio_square-blue',
      increaseArea : '20%' // optional
    })
  })
  
  function login(){
	  var jsonuserinfo = $('#login').serializeJSON();
	  alert(jsonuserinfo);
	  $.ajax({ 
          type: "POST",   
          url: "/user/login",
          data: jsonuserinfo,
          contentType: "application/json;charset=utf-8",
          dataType: "json",
          success: function(data){
              if (data.success) { 
                  $("#createResult").html(data.msg);
              } else {
                  $("#createResult").html("出现错误：" + data.msg);
              }  
          },
          error: function(jqXHR){     
             alert("发生错误：" + jqXHR.status);  
          },     
      });
  }
  
</script>
</body>
</html>
